<template>
<!-- 轮播图 -->
<div id="home" ref="home" >
<!-- <cartbeta></cartbeta> -->

<header1 ref="header1"></header1>
	<div class="home">
		<!-- <div v-for="item in allData.items" v-bind:class="{'lunbo':true}">
			<img :src="item.img_url" alt="">
		</div> -->
		<swiper :options="allData"></swiper>
	</div>
	<!-- 板块1 -->
	<div id="tips" ref="tips">
		<img src="https://m.mi.com/component/list/img/sczb_ed0a4af.png" alt=""><div id="tips2"></div>
	</div>
	<div class="item">
		<div v-for="item in allData2" class="section-box">
		<!-- {{item}} -->
		<!-- 半面 -->
		<!-- <h2>{{item.view_type}}</h2> -->
			
				<div v-for="item1 in item.body.items" class="p11">

					<div  v-if="item.view_type==='list_two_type1'" class="p1">
					<router-link :to="'/detail1/'">
						<img :src="item1.img_url" alt="">
						<h3>{{item1.product_name}}</h3>
						<div>{{item1.product_brief}}</div>
						<p >￥{{item1.product_price}}<span v-if="item1.product_price!=item1.product_org_price">￥{{item1.product_org_price}}</span></p>
						
                    </router-link>
					</div>
					<!-- title-->
					<div  v-else-if="item.view_type==='cells_auto_fill'" class="p2">
						<!-- <div  > -->
						<!-- <h3>{{item}}</h3> -->
							<div v-for=" item3 in item.body.items" class="section2">
								<img :src="item3.img_url" alt="">
							
						
							</div>
							

						<!-- </div> -->

					</div>
					<!-- 3 -->
			
					<div  v-else-if="item.view_type==='list_one_type9'" class="p4">
						<div class="section4" >
						<!-- <h3>{{item}}</h3> -->
							<div v-for=" item3 in item.body.items">
								<img :src="item3.img_url" alt="">
								<h3>{{item3.product_name}}</h3>
								<p>￥{{item3.product_price}}<span>￥{{item3.product_org_price}}</span></p>
								
							
							
							</div>
							

						</div>

					</div>
				<!-- 4 -->
					<div v-else-if="item.view_type==='list_two_type2'" class="p3" >
						<div class="section3" v-for=" item3 in item.body.items" id="ts1">
							
							<!-- <div > -->
								<img :src="item3.img_url" alt="">
								<h3>{{item3.product_name}}</h3>
								<p>￥{{item3.product_price}}<span>￥{{item3.product_org_price}}</span></p>
								
					
					
							<!-- </div> -->
					

						</div>

					</div>
					<div v-else-if="item.view_type==='list_two_type5'" class="p5">
						<div class="section5" >
				
							<div v-for=" item3 in item.body.items">
								<img :src="item3.img_url" alt="">
								<h3>{{item3.product_name}}</h3>
								<p>￥{{item3.product_price}}<span>￥{{item3.product_org_price}}</span></p>
								
					
					
							</div>
					

						</div>

					</div>
					<div v-else-if="item.view_type==='list_one_type10'" class="p6">
						<div class="section6" >
				
							<div v-for=" item3 in item.body.items">
								<img :src="item3.img_url" alt="">
								<h3>{{item3.product_name}}</h3>
								<p>￥{{item3.product_price}}<span>￥{{item3.product_org_price}}</span></p>
								
					
					
							</div>
					

						</div>

					</div>
					<div v-else-if="item.view_type==='list_two_type3'" class="p7">
						<div class="section7" >
				
							<div v-for=" item3 in item.body.items">
								<img :src="item3.img_url" alt="">
								<h3>{{item3.product_name}}</h3>
								<p>￥{{item3.product_price}}<span>￥{{item3.product_org_price}}</span></p>
								
					
					
							</div>
					

						</div>

					</div>
					
					<div v-else-if="item.view_type==='list_one_type12'" class="p9">
						<div class="section9" >
				
							<div v-for=" item3 in item.body.items">
								<img :src="item3.img_url" alt="">
								<h3>{{item3.product_name}}</h3>
								<p>￥{{item3.product_price}}<span>￥{{item3.product_org_price}}</span></p>
								
					
					
							</div>
					

						</div>

					</div>
					<div v-else-if="item.view_type==='list_one_type1'" class="p9">
						<div class="section9" >
				
							<div v-for=" item3 in item.body.items">
								<img :src="item3.img_url" alt="">
								<h3>{{item3.product_name}}</h3>
								<p>￥{{item3.product_price}}<span>￥{{item3.product_org_price}}</span></p>
								
					
					
							</div>
					

						</div>

					</div>

			
		
				

				</div>

			
 


		</div>
				
	</div>
			
			
			
				
			
<div id="maodian"><a href="#"><img src="https://m.mi.com/views/index/img/top_1a2bcd9.png" alt=""></a></div>
		</div>

	</div>
	<!-- 回到顶部 -->
	
</div>
	

</template>

<script type="text/javascript">
import axios from 'axios'
import swiper from 'vue-awesome-swiper'
import Swiper from "./home/swiper"
import Header1 from "./home/header"
import $ from 'jquery'
// import Vue from "vue"
// Vue.component("swiper",{
// 	props:['options'],

// })
// import Cartbeta from './home/cartbeta'
export default{
	data(){
		return {
			allData:[],
			allData2:[],
		}
	},
	methods:{
		
			// scroll(){
			// 	window.onscroll=function(){
			// 		if(document.getElementById('home').scrollTop>=295){
			// 			console.log(1121)
			// 			document.getElementById("header").style.backgroundColor="red"
			// 		}
			// 	}
			// }
			
	},
	mounted(){
		// $("#app").on("scroll",function(){
		// 	console.log(this)
		// 	console.log(123)
		// })

		console.log(this.$refs)
		console.log(this.$refs.home)
		console.log(this.$refs.tips)
		console.log(6666)
		window.addEventListener("scroll",()=>{
			console.log(window.scrollY)
			if(window.scrollY>=295){
				console.log(this.$refs.header1.$el)
				this.$refs.header1.$el.style.backgroundColor="rgb("+229+","+131+","+53+")"
			}
			if(window.scrollY<=295){
				this.$refs.header1.$el.style.backgroundColor=""
			}
		})
		},

	created(){
		// 请求数据1
		axios.get('../static/data/homedata1.json').then(data=>{
			console.log(data);
			console.log(1111)
			this.allData=data.data.data.header.body;
			console.log(this.allData);
			// swiperOption
		}),
		// 请求数据2
		axios.get("../static/data/homedata2.json").then(data=>{
			console.log(data);
			this.allData2=data.data.data.sections;
			console.log(222)
			console.log(this.allData2)
		});
		// console.log(this.$refs)
		// console.log(this.$refs)
		// console.log(this.$refs.tips)
		// console.log(6666)

		
	},
	
	 components: {Swiper,Header1,
	 	// Cartbeta
	 }
	
}

	
</script>

<style type="text/css" scoped>
#maodian{
	position: fixed;
	right: 0.2rem;
	bottom: 0.8rem;
	width: 0.8rem;
	height: 0.8rem;
}
#maodian img{
	width: 100%;
}

.section-box{
	position: relative;
}
h2{
	font-size: 18px;
}
#home{
	width: 100%;
	position: absolute;
	left: 0;right: 0;
	overflow: hidden;
	
}
.home{
	height: 2.94rem;
}
#home,.home{
	width: 100%;
}
	.home h1{
		color: yellow;
	}
	.lunbo{
		width: 100%;height: auto;
	}
	.lunbo img{
		width: 100%;
	}
	#tips{
		width: 100%;
		height: 0.4rem;
		display: flex;

	}
	#tips1{
		
	}
	#tips img{
		width: 0.75rem;

	}
	#tips2 {
		width: 3.4rem
	}
	
	#item{
		width: 100%;
	}
	#item img{
		width: 100%;
	}
	#item h3,#item p{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

	}
	.item h3{
		font-size: 0.16rem;

	}
	.item p,.item span{
		font-size: 0.14px;
	}
	.p1{
		width: 100%;font-size: 0.16rem;
	}
	.section-box{
		width: 100%;
		display: flex;
		justify-content:space-between;
	}
	.p1 div{
		font-size: 0.12rem;margin-left: 0.1rem;

	}
	.p1 img{
		width: 100%;
	}
	.p11 h3{
    font-size: .14rem;
    color: rgba(0,0,0,.87);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 0.1rem;
	}
	.p11 p:first-of-type{
    margin-top: .03rem;
    font-size: .12rem;
    height: .17rem;
    line-height: .17rem;
    color: #ff6000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 0.1rem;
	}
	.p11{
		width: 100%;
		display: flex;
		justify-content:space-between;
		/*flex-wrap:wrap;*/
		
	}
	.p11 p span{
		margin-left: 0.1rem;
		text-decoration: line-through;
	}
	.section2{
	width: 200%;
	/*height: 0.46rem;*/
	}
	.section2 div{
		height: 100%;
		height: 100%;
	}
	.p3{
		width: 100%;
		/*display: flex;*/

	}
	.p3 img{
		width: 100%;

	}
	.p4{
		width: 100%;
	}
	.p4 img{
		width: 102%;
	}
	.section2 img{
		width: 50%;
		height: 100%;
		display: block;
		/*margin-top: 0;*/
		/*height: 0.46rem;*/
	}
	.section3{
		width: 100%;
	}
	.section3 img{
		width: 100%;
	}
	.p9,.seciton9{
		width: 100%;
	}
	.section9 img{
		width: 102%;
	}
	.p7{
		width: 66.6%;
	}
	.p7 img{
		width: 100%;
	}
	.section4 img{
		width: 100%;
	}
	img{
		width: 100%;
	}
	/*#ts1{
		width: 100%;
		position: absolute;
		left: 0;
		right: 0;
	}*/
</style>
<!-- <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> -->